import { View ,Image,Text} from "@tarojs/components"
import React, { useState, useEffect } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";
import { AtNavBar,AtSegmentedControl } from 'taro-ui'
import store  from '../../store/index.js'
import HTTP  from '../../service/api'
import './details.less'

const Details = () => {
    const [current,setcurrent]=useState(0)
    const handleClick=(ev)=>{
        setcurrent(ev)
    }
    const detail=JSON.parse(JSON.stringify(store.footdata));
    const [detData,setdetData]=useState({
        categoryId: '',
        costPrice: '',
        descMessage: "",
        detailsImg: "",
        id: '',
        img: "",
        name: "",
        price:'' ,
        profit: '',
        startingTime: "",
        status: '',
        typeId: '',
    })
    
    useEffect(() => {
            Taro.request({
                url:HTTP.api2+'/goodsDetails/find',
                method:'post',
                header:{
                    "content-type":'application/x-www-form-urlencoded'
                },
                data:{
                    // uid:store.userInformation.id,12月17日晚服务器下班获取不到uid，暂时写死
                    uid:'1',
                    gid:store.dataId,
                    bid:store.sid
                }
            }).then(res=>{
                console.log(res.data);
                setdetData(res.data);
                console.log(store.userInformation.id,store.dataId,store.sid);
            })
    },[])
    //立即购买
    const goumai=()=>{
        Taro.navigateTo({
            url:'/pages/my/confirmOrder/confirmOrder'
        })
    }
    return (
        <View>
            <Image src={detData.img} className="picture">
            <View className="XInfo">
                <View >
                    <View style={{fontSize:'30px',fontWeight:'bold',color:'black'}}>真空魔法秋裤</View>
                    <View style={{fontWeight:'bold',color:'black'}}>反正买了不吃亏，实用就完事~</View>
                </View>
                <View style={{color:'black'}}>￥{detData.price}</View>
            </View>
            <AtSegmentedControl
                onClick={handleClick}
                selectedColor='rgb(132,111,42)'
                fontSize='30'
                current={current}
                values={['黑色', '红色', '白色','金色']}
                className="btn"
                />
            </Image>
            <View>
            {
                    current === 0
                    ? 
                    <View className='selContent'>
                        <View className="balckCont">
                            <View className="Imginfo">
                                <Image src={detData.img}></Image>
                            </View>
                            <View className="InfoBox">
                                <View>型号：MF-S234</View>
                                <View style={{padding:'15px 0'}}>颜色：黑色</View>
                                <View>规格：{detData.profit}XX</View>
                            </View>
                            <View className="moneyInfo">
                                <View style={{paddingBottom:'35px'}}>￥{detData.price}</View>
                                <View className="gm" onClick={goumai}>立即购买</View>
                            </View>
                        </View>
                        <View className="btnBox">
                            <View style={{display:'flex',justifyContent:'flex-start',alignItems:'center',padding:'10px 5px'}}>
                                <View style={{width:'10px',height:'10px',borderRadius:'50%',background:'black',margin:'0 10px'}}></View>
                                <Text>查看更多详情》</Text>
                            </View>
                            <Image className="btnImage" src={detData.img}></Image>
                        </View>
                    </View>
                    : null
                } 
                {
                    current === 1
                    ? <View className='selContent1'>
                        <View className="balckCont1">
                            <View className="Imginfo1">
                                <Image src={detData.img}></Image>
                            </View>
                            <View className="InfoBox1">
                                <View>型号：MF-S234</View>
                                <View style={{padding:'15px 0'}}>颜色：红色</View>
                                <View>规格：{detData.profit}xl</View>
                            </View>
                            <View className="moneyInfo1">
                                <View style={{paddingBottom:'35px'}}>￥{detData.sku0.price}</View>
                                <View className="gm1" onClick={goumai}>立即购买</View>
                            </View>
                        </View>
                        <View className="btnBox1">
                            <View style={{display:'flex',justifyContent:'flex-start',alignItems:'center',padding:'10px 5px'}}>
                                <View style={{width:'10px',height:'10px',borderRadius:'50%',background:'black',margin:'0 10px'}}></View>
                                <Text>查看更多详情》</Text>
                            </View>
                            <Image className="btnImage1" src={detData.img}></Image>
                        </View>
                    </View>
                    : null
                }
                {
                    current === 2
                    ? <View className='selContent2'>
                        <View className="balckCont2">
                            <View className="Imginfo2">
                                <Image src={detData.img}></Image>
                            </View>
                            <View className="InfoBox2">
                                <View>型号：MF-S563</View>
                                <View style={{padding:'15px 0'}}>颜色：白色</View>
                                <View>规格：{detData.profit}L</View>
                            </View>
                            <View className="moneyInfo2">
                                <View style={{paddingBottom:'35px'}}>￥{detData.sku2.price}</View>
                                <View className="gm2">立即购买</View>
                            </View>
                        </View>
                        <View className="btnBox2">
                            <View style={{display:'flex',justifyContent:'flex-start',alignItems:'center',padding:'10px 5px'}}>
                                <View style={{width:'10px',height:'10px',borderRadius:'50%',background:'black',margin:'0 10px'}}></View>
                                <Text>查看更多详情》</Text>
                            </View>
                            <Image className="btnImage2" src={detData.img}></Image>
                        </View>
                    </View>
                    : null
                }
                {
                    current === 3
                    ? <View className='selContent3'>
                        <View className="balckCont3">
                            <View className="Imginfo3">
                                <Image src={detData.img}></Image>
                            </View>
                            <View className="InfoBox3">
                                <View>型号：MF-S587</View>
                                <View style={{padding:'15px 0'}}>颜色：金色</View>
                                <View>规格：{detData.profit}xs</View>
                            </View>
                            <View className="moneyInfo3">
                                <View style={{paddingBottom:'35px'}}>￥{detData.sku3.price}</View>
                                <View className="gm3">立即购买</View>
                            </View>
                        </View>
                        <View className="btnBox3">
                            <View style={{display:'flex',justifyContent:'flex-start',alignItems:'center',padding:'10px 5px'}}>
                                <View style={{width:'10px',height:'10px',borderRadius:'50%',background:'black',margin:'0 10px'}}></View>
                                <Text>查看更多详情》</Text>
                            </View>
                            <Image className="btnImage3" src={detData.img}></Image>
                        </View>
                    </View>
                    : null
                }
            </View>

        </View>
    );
}
export default Details;